<template>
    <div class="wrapper">
        <div shadow="never" class="verify-card">
            <el-form label-position="top" :model="ruleForm" class="verify-file" label-width="150px" :inline="true"
                :rules="rules" ref="ruleForm" :disabled="disable" :key="ruleForm.id">
                <el-row>
                    <el-form-item label="设备编号" prop="serial_number">
                        <el-input v-model="ruleForm.serial_number" placeholder="请输入设备编号"></el-input>
                    </el-form-item>
                    <el-form-item label="设备型号" prop="class_type">
                        <el-input v-model="ruleForm.class_type" placeholder="请输入设备型号"></el-input>
                    </el-form-item>
                    <el-form-item label="有效容积（L）" prop="effective_volume">
                        <el-input v-model="ruleForm.effective_volume" placeholder="请输入有效容积"></el-input>
                    </el-form-item>
                    <el-form-item label="温度控制范围" prop="temp_range">
                        <el-input style="width: 215px;" v-model="ruleForm.temp_range" placeholder="请输入温度控制范围"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="验证" prop="verify_method">
                        <el-input v-model="ruleForm.verify_method" placeholder="请输入验证"></el-input>
                    </el-form-item>
                    <el-form-item label="验证时长（H）" prop="verify_duration">
                        <el-input v-model="ruleForm.verify_duration" placeholder="请输入验证时长"></el-input>
                    </el-form-item>
                    <el-form-item label="验证类型" prop="verify_type">
                        <el-input v-model="ruleForm.verify_type" placeholder="请输入验证类型"></el-input>
                    </el-form-item>
                    <el-form-item label="验证时间" prop="verify_time">
                        <el-date-picker style="width: 215px;" @change="handleTimeChange" v-model="ruleForm.verify_time"
                            type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" value-format="timestamp" :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                </el-row>
                <el-form-item label="验证结果" prop="verify_result">
                    <el-radio-group v-model="ruleForm.verify_result">
                        <el-radio :label="1">合格</el-radio>
                        <el-radio :label="0">不合格</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="验证状态" prop="status">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio :label="1">有效</el-radio>
                        <el-radio :label="2">无效</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="负责人" prop="principal">
                    <el-select v-model="ruleForm.principal" filterable clearable>
                        <el-option v-for="handler in staffData" :key="handler.id" :label="handler.name"
                            :value="handler.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="上传报告" prop="verify_reports"  ref="uploadRef">
                    <UploadLink style="width: 215px;" :files.sync="ruleForm.verify_reports"></UploadLink>
                </el-form-item>
            </el-form>
        </div>
        <div class="operation-footer">
            <div class="footer-wrap">
                <el-button size="small" @click="handleClickClose">关闭</el-button>
                <template v-if="mode !== 'detail'">
                    <el-button size="small" type="primary" @click="handleSubmit">保存</el-button>
                </template>
            </div>
        </div>
    </div>
</template>

<script>

import {
    VerifyRecordCreate, VerifyRecordUpdate, VerifyRecordDetail
} from '@/api/qms.js';
import { timestamp10 } from "@/utils/mUtils";
import { AdminBox } from "@/api/customer";
import UploadLink from '@/components/uploadFile/uploadLink.vue';

export default {
    name: 'verifyEdit',
    components: {UploadLink},
    props: ['validation_class', 'mode', 'id'],
    data() {
        return {
            ruleForm: {
                serial_number: '', // 设备编号
                class_type: '', // 设备型号
                effective_volume: '', // 有效容积：L
                temp_range: '', // 温度控制范围
                verify_duration: '', // 验证时长：h
                verify_type: '', // 验证类型
                verify_start_time: 0,
                verify_end_time: 0,
                verify_result: 1, // 验证结果：0-不合格，1-合格
                verify_method: "",
                status: 1, // 验证状态, 1:有效，2:无效。 
                principal: '', // 负责人
                verify_reports:[]

            },
            rules: {
                serial_number: [
                    { required: true, message: '请输入设备编号', trigger: 'blur' }
                ],
                class_type: [
                    { required: true, message: '请输入设备型号', trigger: 'blur' }
                ],
                effective_volume: [
                    { required: true, message: '请输入有效容积', trigger: 'blur' }
                ],
                temp_range: [
                    { required: true, message: '请输入温度控制范围', trigger: 'blur' }
                ],
                verify_duration: [
                    { required: true, message: '请输入验证时长', trigger: 'blur' }
                ],
                verify_type: [
                    { required: true, message: '请输入验证类型', trigger: 'blur' }
                ],
                verify_time: [
                    { required: true, message: '请选择验证时间', trigger: 'change' }
                ],
                verify_result: [
                    { required: true, message: '请选择验证结果', trigger: 'change' }
                ],
                status: [
                    { required: true, message: '请选择验证状态', trigger: 'change' }
                ],
                principal: [
                    { required: true, message: '请选择负责人', trigger: 'change' }
                ],
                verify_reports: [
                    { required: true, message: '请上传报告', trigger: 'change' }
                ],
            }, pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            staffData: []

        };
    },
    computed: {
        disable() {
            return this.mode === 'detail';
        },
    },
    mounted() {
        AdminBox({
            "user_type": "0",
        }).then(res => {
            this.staffData = res.data;
        });
    },
    watch: {
        mode: {
            handler(newValue, oldValue) {
                this.handleChangeMode();
            },
            immediate: true
        },
        "ruleForm.verify_reports": function (val) {
            this.$refs.uploadRef.clearValidate();
        },
    },
    methods: {
        handleTimeChange(val) {
            if (val) {
                this.ruleForm.verify_start_time = timestamp10(val[0]) * 1;
                this.ruleForm.verify_end_time = timestamp10(val[1]) * 1;
            } else {
                this.ruleForm.verify_start_time = undefined;
                this.ruleForm.verify_end_time = undefined;
            }
        },
        handleClickClose() {
            this.$router.push({
                name: 'verifylist',
                query: {
                    type: this.validation_class,
                }
            });
        },
        handleChangeMode() {
            if (this.mode === 'add') {

            } else if (this.mode === 'detail' || this.mode === 'edit') {
                this.getDetail();
            }
        },
        getDetail() {
            VerifyRecordDetail({
                id: this.id * 1
            }).then(res => {
                const data = res.data.data;
                data.checkout_date = data.checkout_date * 1000 || '';
                data.effective_date = data.effective_date * 1000 || '';
                data.verify_start_time = data.verify_start_time * 1000 || '';
                data.verify_end_time = data.verify_end_time * 1000 || '';
                if (data.verify_start_time) {
                    data.verify_time = [data.verify_start_time, data.verify_end_time];
                }
                this.ruleForm = data;
            });
        },
        handleSubmit() {
            this.$refs["ruleForm"].validate((valid) => {
                if (!valid) return;
                const _ruleForm = {
                    ...this.ruleForm,
                    checkout_date: timestamp10(this.ruleForm.checkout_date) * 1,
                    effective_date: timestamp10(this.ruleForm.effective_date) * 1,
                    validation_class: this.validation_class,
                    effective_volume: this.ruleForm.effective_volume * 1,
                    verify_duration: this.ruleForm.verify_duration * 1,
                    verify_start_time: timestamp10(this.ruleForm.verify_start_time) * 1,
                    verify_end_time: timestamp10(this.ruleForm.verify_end_time) * 1,
                };
                if (this.mode === 'add') {
                    VerifyRecordCreate(_ruleForm).then(res => {
                        if (res.code === 10000) {
                            this.$message({
                                type: 'success',
                                message: '保存成功'
                            });
                            setTimeout(() => {
                                this.$router.push({
                                    name: 'verifylist',
                                    query: {
                                        type: this.validation_class,
                                    }
                                });
                            }, 200);
                        }
                    });
                } else {
                    VerifyRecordUpdate(_ruleForm).then(res => {
                        if (res.code === 10000) {
                            this.$message({
                                type: 'success',
                                message: '修改成功'
                            });
                            setTimeout(() => {
                                this.$router.push({
                                    name: 'verifylist',
                                    query: {
                                        type: this.validation_class,
                                    }
                                });
                            }, 200);
                        }
                    });
                }
            });
        }

    },
};
</script>
<style lang="scss" scoped>
.wrapper {

    // min-height: 100vh;
    .form-container {
        box-sizing: border-box;
        padding: 10px;
        padding-top: 10px;
        position: relative;
    }

    .verify-card {
        box-sizing: border-box;
        background: #fff;
        // margin: 8px;
        border-radius: 5px;
        padding: 10px;
    }

    .verify-file {
        .el-input {
            width: 215px;
        }

        .el-radio-group,
        .el-select,
        .el-cascader {
            width: 215px;
        }

        .el-textarea {
            width: 400px
        }

        /deep/ .el-form-item {
            margin-right: 30px !important;
        }
    }



    .box-card {
        width: 450px;

        /deep/.el-card__body {
            padding: 10px;
        }
    }



    .info-card {
        border: none;
        margin-bottom: 10px;

        &.left {
            width: 60%;
        }

        &.right {
            width: 39.5%;
            margin-left: 10px;
        }
    }

    .card-wrap {
        display: flex;
        justify-content: space-around;
        min-height: 200px;

        .info-card {
            display: inline-block;
            min-height: 100%;
        }
    }

    .file-list {
        width: 100%;
        // padding-top: 10px;

        li {
            // width: 60%;
            display: flex;
            // justify-content: space-between;
            padding-bottom: 5px;
            align-items: center;

            .file-icon {
                cursor: pointer;
                font-size: 14px;

                &:hover {
                    color: #409EFF;
                    // transform: scale(1.5);
                    // transition: all ease 0.2s;
                }
            }

            .link-text {
                justify-content: flex-start;

                /deep/.el-link--inner {
                    width: 400px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }

    .seal-img {
        width: 100%;

        img {
            width: 100%;
        }
    }
}
</style>